<template>
  <!--添加价格组-->
  <div class="ziliao">
    <div style="font-size: 14px;color: red;margin-top: 5px">百分比应在{{agentDiscount}}--100之间设置</div>
    <wv-group title="价格组名称">
      <wv-input placeholder="请输入价格组名称" :required=true type="text" v-model="agentPrice.agentPriceName"></wv-input>
    </wv-group>

    <!--    <wv-group title="加减价类型" class="way" v-model="agentPrice.percentageType">
          <wv-cell
            title="加减价类型"
            is-link
            :value="percentageData.percentageTypeDesc"
            @click.native="pickerShow = true"
          />
          <wv-picker
            :visible.sync="pickerShow"
            value-key="percentageTypeDesc"
            :columns="percentageDataColumns"
            @confirm="confirmPercentageType"
          />
        </wv-group>-->

    <wv-group title="百分比">
      <wv-input placeholder="请输入百分比" type="number" :maxlength="3" v-model="agentPrice.percentage"></wv-input>
    </wv-group>

    <wv-group title="价格组排序">
      <wv-input placeholder="请输入价格组排序" :required=true type="number" v-model="agentPrice.percentageSort"></wv-input>
    </wv-group>

    <p class="offer" @click="goSubmit(agentPrice)">保存</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {agentDiscount, addAgentPrice} from '../../utils/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'addAgentPrice',
    props: {},
    data() {
      return {
        agentPrice: {
          agentPriceName: '',
          agentId: '',
          percentageType: '',
          percentage: '',
          percentageSort: ''
        },
        agentDiscount: '',
        pickerShow: false,
        percentageData: {percentageTypeDesc: '加价', percentageType: 1},
        percentageDataColumns: [
          {
            values: [
              {percentageTypeDesc: '加价', percentageType: 1},
              {percentageTypeDesc: '减价', percentageType: 2},
            ],
            defaultIndex: 0
          }
        ],
      };
    },
    methods: {
      checkFrom: function (agentPrice) {
        let msg = {};
        if (this.$myUtils.isNull(agentPrice.agentPriceName)) {
          msg['result'] = false;
          msg['info'] = '请输入加减价名称';
          return msg;
        }
        if (this.$myUtils.isNull(agentPrice.percentageType)) {
          msg['result'] = false;
          msg['info'] = '请选择加减价类型';
          return msg;
        }
        if (this.$myUtils.isNull(agentPrice.percentage)) {
          msg['result'] = false;
          msg['info'] = '请输入加减价百分比';
          return msg;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      confirmPercentageType(picker) {
        this.percentageData = picker.getValues()[0];
      },
      goAddAgentPrice(params) {
        addAgentPrice(params).then(res => {
          console.log(res)
          if (res.code == 100) {
            Toast.text("新增成功");
            this.$router.go(-1);
          } else {
            Toast.text(res.info);
          }
        })
      },
      getAgentDiscount(params) {
        agentDiscount(params).then(res => {
          console.log(res)
          if (res.code == 100) {
            this.agentDiscount = res.object.agentDiscount;
          } else {
            Toast.text(res.info);
          }
        })
      },
      goSubmit(agentPrice) {
        console.log(agentPrice)
        let msg = this.checkFrom(agentPrice);
        if (!msg.result) {
          Toast.text(msg.info);
          return;
        }
        this.goAddAgentPrice(agentPrice);
      }

    },
    created() {
      let query = this.$route.query;
      this.agentPrice['agentId'] = query.agentId;
      this.getAgentDiscount({agentId: query.agentId});
      this.agentPrice['percentageType'] = this.percentageData.percentageType;
    },
    computed: {},
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .ziliao {
    padding-bottom: 50px;
  }

  .way .weui-cell_access {
    margin: 0 15px;
    padding: 15px 0;
    border-bottom: 1px solid transparent;
    text-align: left
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
